/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/jsx-no-bind */
/**
 * 极兔任务号
 *  */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, message, Row, Col, Popconfirm, Table } from 'antd';
import { getLStorage } from '@/utils/utils';
import styles from '../style.less';

const FormItem = Form.Item;

@connect(({ allocation, loading, user }) => ({
  allocation,
  userInfo: user.currentUser.user_info,
  getJtTaskNumber: loading.effects['allocation/getJtTaskNumber'],
  setJtTaskNumber: loading.effects['allocation/setJtTaskNumber'],
}))
@Form.create({ name: 'config' })
class TaskJtNumber extends PureComponent {
  constructor(props) {
    super(props);
    const { phone, gp_area_ids = [], area_ids } = this.props.userInfo || {};

    const isCompany = area_ids == '*';
    const cacheAreaId = getLStorage(`KB_GP_AREA_${phone}`);
    const area_id = gp_area_ids.includes(cacheAreaId)
      ? cacheAreaId
      : isCompany
        ? '0'
        : gp_area_ids[0];
    this.state = {
      area_id,
    };
    this.columns = [
      {
        title: '任务号',
        dataIndex: 'job_no',
        key: 'job_no',
        align: 'center',
      },
      {
        title: '操作',
        align: 'center',
        render: (text, record) => (
          <Popconfirm
            placement="top"
            title="是否删除该任务号"
            onConfirm={this.delete.bind(this, record)}
            okText="确定"
            cancelText="取消"
          >
            <a>删除</a>
          </Popconfirm>
        ),
      },
    ];
  }

  componentDidMount() {
    this.getList();
  }

  componentDidUpdate(prevPros) {
    if (prevPros.activeKey !== this.props.activeKey && this.props.activeKey == this.props.type) {
      this.getList();
    }
  }

  getList() {
    const {
      dispatch,
      setRecord: { type, branch_code },
      form: { resetFields },
    } = this.props;
    const { area_id } = this.state;
    // 获取列表
    dispatch({
      type: 'allocation/getJtTaskNumber',
      payload: {
        brand: type,
        branch_code,
        area_id,
      },
    });
    resetFields();
  }

  setJtTaskNumber = params => {
    const {
      dispatch,
      setRecord: { branch_code },
    } = this.props;
    const { area_id } = this.state;
    dispatch({
      type: 'allocation/setJtTaskNumber',
      payload: {
        branch_code,
        area_id,
        ...params,
      },
    }).then(() => {
      this.getList();
    });
  };

  addConfig() {
    const that = this;
    const {
      form,
      allocation: {
        taskList, // 上一站数据列表
      },
    } = this.props;
    if (taskList && taskList?.length >= 1) {
      message.error('不允许添加多个任务号！');
      return;
    }
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      that.setJtTaskNumber({
        ...fieldsValue,
      });
    });
  }

  delete() {
    this.setJtTaskNumber({
      job_no: '',
    });
  }

  render() {
    const {
      showDetail,
      form: { getFieldDecorator },
      allocation: { taskList },
      getJtTaskNumber,
      setJtTaskNumber,
      setRecord: { brand, branch_code },
    } = this.props;

    return (
      <div className={styles.PostOption}>
        <Row type="flex" justify="space-between" align="middle" style={{ marginBottom: 24 }}>
          <Col span={18} className={styles.title}>
            <Form layout="inline">
              <FormItem>
                {getFieldDecorator('job_no', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '极兔任务号',
                    },
                    {
                      max: 15,
                      message: '请输入15位以内的字符！',
                    },
                    {
                      pattern: /^\w+$/,
                      message: '请输入字母或数字！',
                    },
                  ],
                })(<Input allowClear placeholder="极兔任务号" />)}
              </FormItem>
              <FormItem>
                <Button
                  loading={setJtTaskNumber}
                  type="primary"
                  onClick={this.addConfig.bind(this)}
                >
                  添加
                </Button>
              </FormItem>
            </Form>
          </Col>
          <Col span={6}>
            <Row type="flex" align="middle" justify="end">
              <Col>
                <span>{brand}</span>
                <span>（{branch_code}）</span>
              </Col>
              <Col>
                <Button type="primary" onClick={() => showDetail(false)}>
                  返回
                </Button>
              </Col>
            </Row>
          </Col>
        </Row>
        <Table
          className={styles.Tables}
          dataSource={taskList}
          columns={this.columns}
          rowKey="id"
          pagination={{ hideOnSinglePage: true }}
          loading={getJtTaskNumber}
        />
      </div>
    );
  }
}

export default TaskJtNumber;
